الآن في هذه اللحظة،
نحن نستخدم مجموعة اللقاءات الوهمية هذه
لتقديم قائمة لقاءاتنا.
وعلى الصفحة التفصيلية للقاء ،
لدينا فقط بعض البيانات الوهمية المشفرة الثابتة
وهذا غير واقعي.
في الواقع ، سيكون لدينا خلفية ،
بعض قواعد البيانات التي تحتوي على تلك البيانات.
الآن دعنا نحاكي ما نقوم به
ولاحقًا سيكون لدينا واحدًا ،
لكن أولاً وقبل كل شيء ، لنحاكى أن لدينا واحدًا
ثم مكوِّن الصفحة الرئيسية ،
وكملف index.js للمسار ، دعونا لا نجتاز اللقاءات الوهمية
في دعامة اللقاءات مثل هذا ،
ولكن بدلا من ذلك دعونا نغير هذا المكون
لتتصرف بالطريقة التي ستتصرف بها
إذا كنا سنصل إلى الخلفية.
وكيف نفعل ذلك عادةً في React؟
حسنًا ، إذا أردنا إرسال طلب HTTP
بمجرد تقديم هذه الصفحة ،
عادةً ما نستخدم الخطاف useEffect للتحكم في ذلك.
لذلك سنستورد useEffect
من React ثم نفِّذ useEffect هنا
ولديها مجموعة تبعيات فارغة ، على الأرجح ،
مما يعني أن هذا يؤثر على وظيفة تعمل في أي وقت
يتم تقديم المكون لأول مرة ، ولكن ليس بعد ذلك.
ثم هنا يمكننا إحضار بياناتنا
ويمكننا إدارة بعض الحالات لهذا المكون
باستخدام خطاف useState ، والذي بالتالي ،
تحتاج أيضًا إلى الاستيراد من React.
ثم هنا ، يمكننا إدارة قائمة لقاءاتنا.
لنفترض أن ملف loadMeetups
ولدينا وظيفة تحديث الحالة setLoadedMeetups الخاصة بنا
وقيد الاستخدام ،
سنرسل طلب HTTP هذا وجلب البيانات.
وبعد ذلك ، بمجرد الانتهاء من ذلك ،
ستكون مهمة غير متزامنة ، بالطبع ،
ولكن بمجرد الانتهاء من ذلك ، نسمي setLoadedMeetups
مثل هذا وقمنا بإعداد اللقاءات التي قمنا بإحضارها
من الخادم لديه لقاءات لهذا المكون.
وفي الوقت الحالي ،
لنحاكى أننا جلبنا اللقاءات الوهمية.
بالطبع ، هم متاحون منذ البداية هنا ،
ولكن لنفترض أننا جلبناها للتو من الخادم.
لذا اكتمل بعض الوعد هنا وحصلنا على الرد.
والآن أضع لقاءاتي الوهمية على أنها لقاءات محملة
وهنا في رمز JSX ، مررنا اللقاءات المحملة ،
لذلك دولتنا في قائمة اللقاءات.
إذا فعلنا كل ذلك ،
إذا قمنا بزيارة صفحة البداية مع جميع اللقاءات ،
لا نرى أي فرق هناك.
عندما أعيد التحميل ، تكون جميع اللقاءات هناك ،
من البداية
لأننا لا نرسل طلب HTTP حقًا.
لكن من الناحية الفنية هناك فرق
لأنه من المهم ملاحظة أن useEffect
يعمل بحيث ينفذ هذه الوظيفة
بعد المهم ، بعد تنفيذ وظيفة المكون.
هذا يعني أن ،
في المرة الأولى التي يتم فيها عرض مكون الصفحة الرئيسية هذا ،
سوف تكون loadMeetups مجموعة فارغة.
ثم سيتم تنفيذ وظيفة التأثير هذه ،
ثم سيتم تحديث الدولة
ومن ثم سيتم تنفيذ وظيفة المكون هذه مرة أخرى
لأن الدولة تغيرت
وبعد ذلك سيعيد عرض القائمة
بالبيانات الفعلية
ولكن سيكون لدينا دورتين لعرض المكون.
وفي دورة العرض الأولى ،
في المرة الأولى التي يتم فيها عرض هذا المكون ،
ستكون حالة loadMeetups هي هذه الحالة الأولية ،
هذه المجموعة الفارغة.
الآن ، لماذا أؤكد هذا؟
لأننا إذا جلبنا هذا من الخلفية ،
قد يرى مستخدمينا أداة تحميل دوّارة لفترة وجيزة ،
والتي يمكن أو لا يمكن أن تكون تجربة المستخدم
نريد أن نقدم.
لكن بالإضافة إلى ذلك ، حتى هنا حيث لا نفعل ذلك حقًا
إرسال الطلب وحيث الرد ،
"تصل بشكل أساسي ، على الفور" حتى في هذه الحالة.
بسبب هاتين الدورتين للعرض ،
لدينا مشكلة في تحسين محرك البحث.
إذا شاهدت مصدر الصفحة ، ستلاحظ ذلك
أن هناك بيانات اللقاء الفعلية مفقودة.
حصلت على قائمتي غير المرتبة هنا
وهذه القائمة غير المرتبة فارغة.
لذا فإن العناصر التي نراها على الشاشة هنا ،
هذه العناصر مفقودة في محتوى HTML.
في صفحة HTML جلبناها من الخادم
وهم في عداد المفقودين لأنه يتم عرضها فقط
في دورة تنفيذ المكون الثاني.
ولكن تم إنشاء صفحة HTML المعروضة مسبقًا
بواسطة NextJS تلقائيا لا تنتظر
لهذه الدورة الثانية.
يأخذ دائمًا نتيجة دورة العرض الأولى
وإرجاع الحالة كرمز HTML معروض مسبقًا.
وهناك ، هذه البيانات مفقودة.
الآن ، بالطبع ، هنا
مع البيانات الوهمية ،
لا داعي للقيام بذلك على هذا النحو.
ولكن كما قلت ، نحن في الأساس مجرد محاكاة
أننا نقوم بجلب هذه البيانات من الخادم
ومن ثم سنواجه المشكلة التي لا ينتظرها NextJS
من أجل جلب هذه البيانات ،
للعودة بعد ذلك إلى الصفحة التي تم عرضها مسبقًا بالكامل ،
لكنها ترجع النتيجة
من المكون الأول الذي تم تقديمه.
وقد تكون هذه صفحة فارغة جدًا.
وهذا الآن تفسير مطول
للمشكلة التي نواجهها هنا ،
لكنها مشكلة مهمة
ومن المهم فهم هذه المشكلة بشكل صحيح.
لكن لحسن الحظ ، لدى NextJS أيضًا حلولًا لهذه المشكلة.
يحتوي على المزيد من الميزات الأساسية المضمنة في NextJS والتي تساعدنا
مع هذه المشكلة على وجه التحديد
أننا نريد عرض بيانات مسبقًا لصفحة ،
ولكن مع البيانات التي علينا انتظارها.
ونحتاج إلى إخبار NextJS ، بمجرد أن ننتهي من الانتظار
وبالتالي هذا ما نذهب إليه الآن
لاستكشاف التالي ،
كيف يمكننا جلب البيانات للعرض المسبق.